<template>
  <div style="height:90vh">
    <div style="text-align:left;margin:1rem">
      <el-dropdown  @command="handleCommand">
        <span class="el-dropdown-link">
          系统功能(T)
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="login">重新登录</el-dropdown-item>
          <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
          <el-dropdown-item command="close">关闭退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
       <span class="el-dropdown-link" style="margin-left:2rem;display:none" @click="search = true" >
           查询
        </span>
    </div>
     <el-tabs type="border-card" style="height:100%" v-model="activeIndex">
      <el-tab-pane label="产品展示" name="1">
        <div>
          <Works item="cp" ></Works>                                                                    
        </div>
      </el-tab-pane>
      <el-tab-pane label="模板" name="2">
        <div>
          <Works item='mb' ></Works>                                                                    
        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="font-size:12px;margin-top:4px">广州德尔塔文化发展有限公司</div>
    <el-dialog
      title="登录"
      :visible.sync="isLogin"
      width="60%"
      :before-close="handleClose">
        <el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" style="width:75%">
          <el-form-item label="用户名">
            <el-input type="text" v-model="user.name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="密码" >
            <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">确认</el-button>
            <el-button @click="isLogin = false">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog
      title="修改密码"
      :visible.sync="changePwd"
      width="60%"
      :before-close="handleClose">
        <el-form :model="password" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="密码" >
            <el-input type="password" v-model="password.pwd1" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" >
            <el-input type="password" v-model="password.pwd2" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="changePassword()">提交</el-button>
            <el-button @click="changePwd = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
  </div>
</template>
<script>
  import Works from './Works.vue'
  import {ipcRenderer} from 'electron'
  export default {
    components: {
      Works
    },
    data () {
      return {
        activeIndex: '1',
        isLogin: false,
        changePwd: false,
        user: {name: '', password: ''},
        password: {pwd1: '', pwd2: ''}
      }
    },
    methods: {
      handleCommand (command) {
        switch (command) {
          case 'login':
            this.isLogin = true
            this.changePwd = false
            break
          case 'changePwd':
            if (this.user.name !== '' && this.user.password !== '') {
              this.changePwd = true
              this.isLogin = false
              this.password = {pwd1: this.user.password, pwd2: ''}
            } else {
              this.$message('当前使用者未登录，无法修改密码！')
            }
            break
          case 'close':
            ipcRenderer.send('asynchronous-message', 'close')
            break
        }
      },
      submitForm () {
        var user = this.findUser(this.user.name)
        if (user) {
          this.user = user
        } else {
          const SQL = `INSERT INTO user (name,password)
          VALUES ('${this.user.name}','${this.user.password}')`
          console.log(SQL)
          this.$db.run(SQL, err => {
            if (err) {
              this.$message.warning('登录失败 er：' + err)
            } else {
              this.$message({
                message: '登录成功',
                type: 'success'
              })
              this.isLogin = false
            }
          })
        }
      },
      findUser (name) {
        var sql = "select * from user where `name` = '" + this.user.name + "'"
        this.$db.all(sql, (err, res) => {
          if (err) {
            this.$message.warning('获取数据失败 er：' + err)
          } else {
            if (res.length > 0) {
              return res[0]
            }
          }
        })
      },
      changePassword () {
        if (this.password.pwd1 === this.password.pwd2) {
          this.user.password = this.password.pwd1
          const SQL = `update user set password='${this.user.password}' where id='${this.user.id}'`
          console.log(SQL)
          this.$db.run(SQL, err => {
            if (err) {
              this.$message.warning('保存失败 er：' + err)
            } else {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.changePwd = false
            }
          })
        } else {
          this.$message.warning('密码不相同')
        }
      }
    }
  }
</script>
<style scoped>
.box{
    flex-direction:column  ;
    display: flex;
}
.nav{
  display: flex;
  order:4;
}
</style>